<template>
	<view class="wrap">

		<!-- 班级信息卡片 -->
		<view class="class-card">
			<view class="class-header">
				<text class="class-name">{{ classInfo.name }}</text>
				<view class="action-buttons">
					<view class="action-btn">
						<text class="btn-text" @click="() => {
              forUpdateName = classInfo.name.trim()
              showUpdate=true
            }">修改</text>
					</view>
					<!-- <view class="action-btn" @click="transfer()">
					  <text class="btn-text">转让</text>
					</view> -->
					<view class="action-btn delete-btn">
						<text class="btn-icon" @click="deleteClass">删除</text>
					</view>
				</view>
			</view>

			<view class="class-info">
				<view class="info-row">
					<div class="info-label">老师：</div>
					<div class="info-value">{{ classInfo.teacher }}</div>
				</view>
				<view class="info-row">
					<div class="info-label">班级口令：</div>
					<div class="info-value">{{ classInfo.code }}</div>
				</view>
			</view>
		</view>

		<!-- 班级成员 -->
		<view class="members-section">
			<view class="members-header">
				<text class="members-title">班级成员(2人)</text>
			</view>

			<view class="members-list">
				
				 <view v-if="classmembers && classmembers.length > 0">
				 <view class="member-item" v-for="(item,index) in classmembers" :key="index">
				 	<view class="member-avatar purple">
				 		<text class="avatar-text">{{getFirstChar(item.memberName)}}</text>
				 	</view>
				 	<text class="member-name">{{item.memberName}}</text>
				 	<view class="delete-member">
				 		<text class="delete-icon" @click="deleteMember(item.id)">🗑</text>
				 	</view>
				 </view>
				 </view>
				<view v-else class="empty-state">
				    <text>暂无成员</text>
				  </view>
			</view>
		</view>
		<u-modal v-model="showUpdate" title="修改班级" :show-cancel-button="true" @confirm="handleUpdateName">
			<div style="padding: 20px 20px">
				<u-form-item :border-bottom="true" :label-width="140" label="班级名称:">
					<u-input v-model="forUpdateName" />
				</u-form-item>
			</div>
		</u-modal>
	</view>
</template>

<script>
	import * as ClassApi from '@/api/class.js'

	export default {
		data() {
			return {
				showUpdate: false,
				classInfo: {
					id: '',
					name: '',
					code: '',
					teacher: ''
				},
				forUpdateName: '',
				classmembers: []
			}
		},

		onLoad(options) {
			this.classInfo.id = options.id;
			this.classInfo.code = options.code;
			this.classInfo.name = options.name;
			this.classInfo.teacher = options.teacher;

			this.getClassMembers();
		},

		methods: {
			/**
			 * 返回上一页
			 */
			goBack() {
				uni.navigateBack();
			},
			transfer() {
				uni.showToast({
					title: '功能暂未开放',
					icon: 'success',
					duration: 2000
				});
			},
			
			
			deleteMember(id){
				uni.showModal({
					title: '确认删除',
					content: '确定要删除该成员吗？',
					success: async (res) => {
						if (res.confirm) {
							try {
								// 显示加载提示
								uni.showLoading({
									title: '删除中...'
								});
				
								await ClassApi.deleteMemberById({
									id : id
								});
				
								uni.hideLoading();
								
								this.getClassMembers();
				
								uni.showToast({
									title: '成员已删除',
									icon: 'success',
									duration: 2000
								});
							} catch (error) {
								console.error('成员删除失败:', error);
								uni.hideLoading();
								uni.showToast({
									title: '成员删除失败',
									icon: 'none'
								});
							}
						}
						// 用户取消删除则不做任何操作
					}
				});
			},


			async getClassMembers() {
				const resp = await ClassApi.getClassMembers({
					classId: this.classInfo.id.trim()
				});
				if (resp.code === 0 && resp.data) {
					this.classmembers = resp.data;
					console.log("******" + this.classmembers);
				}
			},

			getFirstChar(str) {
				return str[0];
			},


			async handleUpdateName() {
				if (!this.forUpdateName.trim()) {
					return uni.showToast({
						title: '班级名称不能为空',
						icon: 'none'
					});
				}
				try {
					uni.showLoading({
						title: '修改中...'
					});
					await ClassApi.updateClassName({
						id: this.classInfo.id.trim(),
						className: this.forUpdateName.trim()
					});
					this.classInfo.name = this.forUpdateName;
					this.showUpdate = false;
					uni.hideLoading();
					uni.showToast({
						title: '修改成功',
						icon: 'success'
					});
				} catch (error) {
					console.error('修改失败:', error);
					uni.hideLoading();
					uni.showToast({
						title: '修改失败',
						icon: 'none'
					});
				}
			},


			deleteClass() {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除班级吗？',
					success: async (res) => {
						if (res.confirm) {
							try {
								// 显示加载提示
								uni.showLoading({
									title: '删除中...'
								});

								await ClassApi.deleteClass(this.classInfo.id);

								uni.hideLoading();

								uni.showToast({
									title: '班级已删除',
									icon: 'success',
									duration: 2000
								});


								uni.switchTab({
									url: '/pages/index/index'
								});

							} catch (error) {
								console.error('班级删除失败:', error);
								uni.hideLoading();
								uni.showToast({
									title: '班级删除失败',
									icon: 'none'
								});
							}
						}
						// 用户取消删除则不做任何操作
					}
				});
			}


		}
	}
</script>

<style>
	.wrap {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.status-bar {
		width: 100%;
		background-color: #fff;
	}

	.nav-bar {
		height: 88rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.nav-back {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back-icon {
		font-size: 40rpx;
		color: #333;
		font-weight: bold;
	}

	.nav-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
	}

	.nav-placeholder {
		width: 60rpx;
	}

	.class-card {
		background: linear-gradient(135deg, #4FC3F7 0%, #29B6F6 100%);
		border-radius: 24rpx;
		margin: 32rpx;
		padding: 40rpx;
		color: #fff;
	}

	.class-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 40rpx;
	}

	.class-name {
		font-size: 40rpx;
		font-weight: bold;
		color: #fff;
		line-height: 1.2;
	}

	.action-buttons {
		display: flex;
		gap: 16rpx;
	}

	.action-btn {
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 20rpx;
		padding: 12rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 60rpx;
	}

	.delete-btn {
		background-color: #d54941;
		color: white;
	}

	.btn-text {
		font-size: 24rpx;
		color: #fff;
		font-weight: 500;
	}

	.btn-icon {
		font-size: 24rpx;
	}

	.class-info {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.info-row {
		display: flex;
		align-items: center;
	}

	.info-label {
		font-size: 28rpx;
		color: #fff;
		margin-right: 16rpx;
	}

	.info-value {
		font-size: 28rpx;
		color: #fff;
		font-weight: 500;
	}

	.members-section {
		background-color: #333;
		border-radius: 24rpx;
		margin: 0 32rpx 32rpx;
		padding: 32rpx;
	}

	.members-header {
		margin-bottom: 32rpx;
	}

	.members-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
	}

	.members-list {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	.member-item {
		display: flex;
		align-items: center;
		padding: 16rpx 0;
	}

	.member-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 24rpx;
		flex-shrink: 0;
	}

	.member-avatar.purple {
		background-color: #9C27B0;
	}

	.member-avatar.blue {
		background-color: #4FC3F7;
	}

	.avatar-text {
		font-size: 32rpx;
		color: #fff;
		font-weight: 500;
	}

	.member-name {
		font-size: 28rpx;
		color: #fff;
		flex: 1;
	}

	.delete-member {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.delete-icon {
		font-size: 32rpx;
		color: #999;
	}
	
	.empty-state {
	  /* 居中显示 */
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  /* 增加内边距和颜色区分 */
	  padding: 40rpx 0;
	  color: #999;
	  /* 可以添加一个占位高度，避免布局跳动 */
	  min-height: 200rpx;
	}
</style>